<template>
  <div class = "add-song">
    <div class = "top">
      <h1>添加歌曲到列表</h1>
      <i class = "icon-close" @click = "hide"></i>
    </div>
    <div class = "search">
      <search-bar @inputchange = "inputChange" @confirmsearch = "addHistory"></search-bar>
    </div>
    <div class = "list-wrapper" v-show = "query">
      <search-list @select = "selectSong" @changehistory = "changeHistory"></search-list>
    </div>
    <div class = "switch-wrapper">
      <switch-btn :switches = "switches" @choose = "chooseComponent"></switch-btn>
    </div>
    <div class="components-wrapper">
      <component :is = "name"
                 :songs="recent"
                 @remove = "removeHistory"
                 @removeall = "removeAll"
                 @selecthistory = "selectRecord"
                 @select = "selectSong">
      </component>
      <div v-if = "name == 'history'">
        <confirm @confirm = "toConfirm" v-if = "confirm"></confirm>
      </div>
    </div>
  </div>
</template>

<script>
    import SearchBar from "@/components/search-bar/SearchBar";
    import SearchList from "@/components/search-list/SearchList";
    import switchBtn from "@/base/switch/switchBtn";
    import SearchHistory from "@/components/search-history/SearchHistory";
    import recent from "@/base/recent/recent";
    import Confirm from "@/base/confirm/Confirm";
    import {searchOptions, selectOptions} from "@/common/js/mixin";
    import {method} from "@/config/mode-config/config";
    import {mapGetters} from 'vuex'

    export default {
        components: {
            SearchBar,
            SearchList,
            switchBtn,
            Confirm,
            'history': SearchHistory,
            'recent': recent
        },
        mixins: [searchOptions, selectOptions],
        data() {
            return {
                name: 'recent',
                switches: [
                    {name: '最近播放', val: 'recent'},
                    {name: '历史记录', val: 'history'}
                ]
            }
        },
        computed: {
            ...mapGetters('user',['recent'])
        },
        methods: {
            hide() {
                this.$emit('hide')
            },
            chooseComponent(name){
                if (name !== this.name)
                    this.name = name
            }
        },
        mounted() {
            this.setFlag(method.addSingle)
        }
    }
</script>

<style scoped lang = "stylus">
  @import "~common/stylus/variable"
  .add-song
    position fixed
    top 0
    bottom 0
    left 0
    right 0
    z-index 350
    background $color-background
    .top
      position relative
      display flex
      justify-content center
      align-items center
      width 90%
      height 54px

      h1
        font-size $font-size-large-x
        color $color-text

      .icon-close
        position absolute
        right 0
        top .8rem
        color $color-theme
        font-size 1.7rem

    .search
      width 90%
      height 44px
      margin 1rem auto

    .list-wrapper
      margin 1rem auto
      width 90%
      height 500px
      background $color-background-d

    .switch-wrapper
      width 90%
      margin 2rem auto
    .components-wrapper
      width 90%
      margin 1rem auto
</style>
